<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 300px;
      height: 300px;
      background-color: pink;
      text-align: center;
      line-height: 300px;
      font-size: 40px;
      font-weight: bold;
      color: aliceblue;
    }
  </style>
</head>

<body>
  <ruby>
    温
    <rt>wēn</rt>
    <rp>wen</rp>
    习<rt>xí</rt>
    饭<rt></rt>
  </ruby>

  <div class="box"> </div>
</body>
<script>
  /**
   * 1.手写防抖函数
   *  核心：利用 setTimeout 定时器实现
   *  1.声明定时器变量
   *  2.每次鼠标移动（事件触发）的时候都要先判断是否有定时器，如果有先清除以前的定时器
   *  3.如果没有定时器，则开启定时器，存入到定时器的变量里面
   *  4.定时器里面写函数调用
  */
  let num = 0
  const box = document.querySelector('.box')
  function mouseMove() {
    box.innerHTML = num++
  }
  function debounce(fn, t) {
    let timer
    return function () {  // 返回匿名函数
      if (timer) clearTimeout(timer)
      timer = setTimeout(function () {
        fn()  // 加小括号调用函数
      }, 500)
    }
  }
  box.addEventListener('click', debounce(mouseMove, 500))
  //debounce： 函数防抖 概念 ：函数防抖（debounce），就是指触发事件后，
  //在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间

  /**
   * 2. 手写节流函数
   *   核心：节流的核心就是利用定时器来实现：
   *   1.声明一个定时器变量
   *   2.当鼠标每次滑动都先判断是否有定时器，如果有定时器则不开启新定时器
   *   3.如果没有定时器则开启定时器，记得保存在变量里面
   *   注意：
   *      1.定时器里面调用函数执行的函数
   *      2.定时器里面要把定时器清空
  */
  let numtrue = 0;
  const boxtrue = document.querySelector('.box')
  function mouseMovetrue() {
    boxtrue.innerHTML = numtrue++
  }
  function throttle(fn, t) {
    let timertrue = null
    return function () { //匿名函数
      if (!timertrue) {
        timertrue = setTimeout(function () {
          fn() // 加小括号调用函数
          timertrue = null // 清除定时器
        }, t)
      } else {
        return
      }
    }
  }
  boxtrue.addEventListener('click', throttle(mouseMovetrue, 500))
  /**
   * 性能优化                     说明                                                     使用场景
   *  防抖      单位时间内，频繁触发事件，只执行最后一次           搜索框搜索输入、手机号、邮箱验证输入检测
   *  节流      单位时间内，频繁触发事件，只执行第一次             高频事件：鼠标移动 mousemove、页面尺寸缩放 resize 、滚动条滚动scroll等等
  */
</script>

</html>